<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/tags.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
<title>收费站详情</title>
<script type="text/javascript">
$(function() {

	checkInfoByStationId();

	
    $('#branch').change(function() {
        checkInfoByStationId();
    });
    
    function checkInfoByStationId() {
        $.post(ctx + "/station/station.json?branchId="
        		+ $("#branch").val(), function (html) {
        	$('.stationBox').html(html);
        });

    }

});
	
</script>
<style type="text/css">	

   div.stationBox {     
	    border: 1px solid #BfD6E1;	
	  
        font: 14px 'Microsoft YaHei','微软雅黑';       
    }
    
    .top_bar {
	    height: 40px;
	    line-height: 40px;
	    margin-left: 20px;
    }
    
   .infortable {
		font-family: verdana,arial,sans-serif;;
		border: 1px solid #BfD6E1;
		border-collapse: collapse;
   }
   .infortable th {
		background:#b5cfd2;
		border-width: 1px;
		width:100px;
		height:34px;
		border: 1px solid #BfD6E1;
		font-size: 20px;
    }
    .infortable td {
	    text-align:center;
		background-color: #FEFEFE; 
		border-width: 1px;
		width:100px;
		height:30px;
		padding:2px;
		border: 1px solid #BfD6E1;	
	    font: 17px 'Microsoft YaHei','微软雅黑';
    }
  
  .total {
      margin: 20px auto;
  }
 
  .total th
  {
	  width:100px;
	  height:30px;
	  text-align:center;
	  font: 17px 'Microsoft YaHei','微软雅黑';
  }   
    
   .total td
  {
     width:100px;
	 height:50px;
     text-align:center;
     font: 17px 'Microsoft YaHei','微软雅黑';
  }   
    
    
    
</style>
</head>
<body>
    <div class="top_bar">
        <label class="label_s_width">管理处:</label>
        <!--    <script>alert("${branchId}")</script> -->
        <select name="branch" id="branch">
            <option value="0">全部</option>
            <c:forEach var="branch" items="${branches}" varStatus="s">
                <option value="${branch.id }"
                    <c:if test="${branch.id==branchId}">selected="selected"</c:if>>${branch.name }</option>
            </c:forEach>

        </select>
    </div>
<div class="stationBox" >
<table class="infortable">

    <tr>
	  <th>管理处</th> <th>路段</th> <th>收费站</th> <th>网络状态</th>
	  <th>专网</th> <th>VPN</th> <th>VPN设备</th> <th>WATCH</th>
	  <th>MTC</th> <th>ETC</th> <th>识别</th>
    </tr>
    
    <c:forEach items="${devNetStates}" var="ds" varStatus="vs" >    
      
    <tr>
	<td>${ds.branchName}</td>
	<td>${ds.roadName}</td>
	<td>${ds.tollStationName}</td>

	<td>	
		<c:if test="${ds.state == 0}">
		  <img src="../resources/images/green.gif"/>
		</c:if>
		<c:if test="${ds.state == 1}">
		 <img src="../resources/images/red.gif"/>
		</c:if>
	</td>
	
	<%--显示在线监控状态信息--%>
	<c:if test="${ds.state == 0}">
	
	<td>
	
	 <c:if test="${ds.toPnServerState ==0 || ds.toPnLocalState ==0}">
	      <img src="../resources/images/green.gif"/>
	 </c:if>
	 <c:if test="${(ds.toPnServerState ==1 || ds.toPnLocalState ==1) && ds.toPnServerState !=0 && ds.toPnLocalState !=0 }">
	     <img src="../resources/images/yellow.gif"/>
	 </c:if>
	 
	 <c:if test="${(ds.toPnServerState ==2 || ds.toPnLocalState ==2) && ds.toPnServerState !=0 && ds.toPnLocalState !=0  && ds.toPnServerState !=1 && ds.toPnLocalState !=1}">
	     <img src="../resources/images/red.gif"/>
	 </c:if>
	 	 
	 <c:if test="${ds.toPnServerState ==4 && ds.toPnLocalState ==4}">
      <img src="../resources/images/oncheck.gif"/>
	 </c:if>  
	 
	</td>
	
	<td>
	  <c:if test="${ds.toVpnServerState ==0 }">
	       <img src="../resources/images/green.gif"/>
	 </c:if>
	 <c:if test="${ds.toVpnServerState ==1 }">
	    <img src="../resources/images/yellow.gif"/>
	 </c:if>
	 <c:if test="${ds.toVpnServerState ==2 }">
	       <img src="../resources/images/red.gif"/>
	 </c:if> 
	 <c:if test="${ds.toVpnServerState ==4 }">
	    <img src="../resources/images/oncheck.gif"/>
	 </c:if>
	</td>
	
	<td>
	  <c:if test="${ds.toVpnLocalState ==0 }">
	     <img src="../resources/images/green.gif"/>
	 </c:if>
	 <c:if test="${ds.toVpnLocalState ==1 }">
	      <img src="../resources/images/yellow.gif"/>
	 </c:if>
	 <c:if test="${ds.toVpnLocalState ==2 }">
	       <img src="../resources/images/red.gif"/>
	 </c:if> 
	 <c:if test="${ds.toVpnLocalState ==4 }">
	     <img src="../resources/images/oncheck.gif"/>
	 </c:if>
	</td>
	
	<td></td>
	<td><img src="../resources/images/oncheck.gif"/></td>
	<td><img src="../resources/images/oncheck.gif"/></td>
	<td><img src="../resources/images/oncheck.gif"/></td>
	
	
	
	</c:if>
	
	<c:if test="${ds.state != 0}">
	 <td></td>
	 <td></td>
	 <td></td>
	 <td></td>
	 <td></td>
	 <td></td>
	 <td></td> 
	</c:if>
    </tr>
    </c:forEach>
    
</table>             
   <table class="total">
    <caption><h2>收费站网络状况统计信息 </h2></caption>  
    <tr>
      <th></th>
	  <th>专网</th>
	  <th>VPN</th>
	  <th>VPN设备</th>
	  <th>WATCH</th>
	  <th>MTC</th>
	  <th>ETC</th>
	  <th>识别</th>
    </tr>

			<tr>
				<td>延时较大：</td>

				<c:forEach items="${pndelay}" var="pnd" varStatus="vs">
					<td>${pnd}</td>
				</c:forEach>

				<td>×</td>
				<td>×</td>
				<td>×</td>
				<td>×</td>
			</tr>

			<tr>
     <td>网络不通：</td>
    <c:forEach items="${pn}" var="o" varStatus="vs" >
         <td>${o}</td>
    </c:forEach>
     <td>×</td>
     <td>×</td>
     <td>×</td>
     <td>×</td>
    </tr>
    
   <tr>
     <td>双网不通：</td>
     <td>${dpn}</td>
     <td></td>
     <td></td>
     <td>×</td>
     <td>×</td>
     <td>×</td>
     <td>×</td>
    </tr>
   </table>
</div>

</body>
</html>
